<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        .h2-jinglingtu {
            width: 24px;
            height: 24px;
            /*整张大图往上、左便宜*/
            background: url("../image/jinglingtu.png") no-repeat -2px -185px;
        }

        .div-jinglingtu {
            width: 236px;
            height: 106px;
            background: url("../image/jinglingtu.png") no-repeat 0 -350px;
            position: relative;
            left: 100px;
        }

        span {
            /*要显示在一行，所以不能使用block，而且还要支持宽、高*/
            display: inline-block;
            background: url("../image/abcd.jpg") no-repeat;
        }

        .ff {
            width: 92px;
            height: 110px;
            background-position: 0 -140px;
        }

        .aa {
            width: 107px;
            height: 109px;
            background-position: 0 -9px;
        }

        .uu {
            width: 92px;
            height: 110px;
            background-position: 0 -140px;
        }

        .kk {
            width: 92px;
            height: 110px;
            background-position: 0 -140px;
        }

        .ss {
            width: 92px;
            height: 110px;
            background-position: 0 -140px;
        }
    </style>
</head>
<body>
<!--多个图片、图标放在同一张图片上，以减少服务器请求次数，主要用作做背景，使用background-position展示不同图片-->
<h2 class="h2-jinglingtu"></h2>
<div class="div-jinglingtu"></div>

<!--使用精灵图拼出自己的名字-->
<span class="ff"></span>
<span class="aa"></span>
<span class="uu"></span>
<span class="kk"></span>
<span class="ss"></span>
</body>
</html>